<!DOCTYPE html>
<html ng-app="DashPlayer" lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Dash JavaScript Player</title>
    <meta name="description" content="" />
    <link rel="icon" type="image/x-icon" href="https://dashif.org/img/favicon.ico" />
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">

    <link rel="stylesheet" href="app/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="app/lib/bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" href="app/lib/bootstrap/css/bootstrap-glyphicons.css">
    <link rel="stylesheet" href="app/css/main.css">
    <link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">

    <!--Libs-->
    <script src="app/lib/jquery/jquery-3.1.1.min.js"></script>

    <script src="app/lib/angular/angular.min.js"></script>
    <script src="app/lib/angular/angular-resource.min.js"></script>
    <script src="app/lib/angular/angular-flot.js"></script>

    <script src="app/lib/bootstrap/js/bootstrap.min.js"></script>

    <script src="app/lib/flot/jquery.flot.min.js"></script>
    <script src="app/lib/flot/jquery.flot.resize.min.js"></script>
    <script src="app/lib/flot/jquery.flot.axislabels.js"></script>
    <!-- App -->
    <script src="../../dist/dash.all.debug.js"></script>
    <script src="../../dist/dash.mss.debug.js"></script>
    <script src="../../contrib/akamai/controlbar/ControlBar.js"></script>
    <script src="app/main.js"></script>
    <script src="app/rules/DownloadRatioRule.js"></script>
    <script src="app/rules/ThroughputRule.js"></script>

</head>
<body ng-controller="DashController" >

    <!-- Mobile Stream Menu-->
    <div class="modal fade" id="streamModal">
        <div class="modal-dialog">
            <div class="list-group modal-list">
              <ul>
                  <li ng-repeat="item in availableStreams" ng-class="{'sub':item.submenu}">
                    <span ng-show="!item.submenu" ng-click="setStream(item)">{{item.name}}</span>
                    <span ng-show="item.submenu">{{item.name}}</span>
                    <ul ng-show="item.submenu">
                        <li ng-repeat="subitem in item.submenu">
                            <span ng-click="setStream(subitem)" ng-if="subitem.url"
                                  data-dismiss="modal">{{subitem.name}}</span>
                            <span ng-if="!subitem.url">{{subitem.name}}</span>
                            <ul ng-if="subitem.submenu">
                                <li ng-repeat="subsubitem in subitem.submenu">
                                    <span ng-click="setStream(subsubitem)"
                                        data-dismiss="modal">{{subsubitem.name}}</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                  </li>
              </ul>
            </div>
        </div>
    </div>


    <!-- TITLE BAR -->
    <div class="container">
        <div class="row title-header">

            <div class="branding">
              <a href="http://dashif.org/" target="_blank"><img class="image" src="app/img/if.png"/></a>
              <span id="big-title">Reference Client</span>
                <span ng-bind="version"></span>
                <span id="commit-info"><!-- commit-info --></span>
            </div>

            <!-- Using iframe to solve pre-flight request issue from GIT-->
            <div class="top-buttons">
                <iframe id="star-button"
                        src="//ghbtns.com/github-btn.html?user=Dash-Industry-Forum&repo=dash.js&type=watch&count=true&size=large"
                        height="30" width="150">
                </iframe>
                <iframe id="fork-button"
                        src="//ghbtns.com/github-btn.html?user=Dash-Industry-Forum&repo=dash.js&type=fork&count=true&size=large"
                        height="30" width="150" >
                </iframe>
            </div>
        </div>

        <div class="row">
            <div class="input-group">
                <div id="desktop-streams" class="input-group-btn">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        Stream <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                        <li class="dropdown-submenu" ng-if="item.submenu" ng-repeat="item in availableStreams" ng-mouseover="onStreamItemHover(item)">
                            <a tabindex="-1" href="#">{{item.name}}</a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-submenu" ng-repeat="subitem in item.submenu" ng-if="subitem.submenu">
                                    <a tabindex="-1" href="#">{{subitem.name}}</a>
                                    <ul class="dropdown-menu">
                                        <li ng-repeat="subsubitem in subitem.submenu">
                                            <a title="{{ subsubitem.moreInfo && 'See ' + subsubitem.moreInfo + ' for more information' || undefined }}"
                                               ng-click="setStream(subsubitem)">{{subsubitem.name}}</a>
                                        </li>
                                    </ul>
                                </li>
                                <li ng-repeat="subitem in item.submenu" ng-if="subitem.url">
                                    <a title="{{ subitem.moreInfo && 'See ' + subitem.moreInfo + ' for more information' || undefined }}"
                                       ng-click="setStream(subitem)">{{subitem.name}}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div id="mobile-streams" class="input-group-btn">
                    <button type="button" class="btn btn-primary" data-toggle="modal" href="#streamModal">
                        Stream <span class="caret"></span>
                    </button>
                </div>
                <input type="text" class="form-control" ng-model="selectedItem.url">
                <span class="input-group-btn">
                    <button class="btn btn-default" ng-click="toggleOptionsGutter(!optionsGutter)" ng-cloak>{{getOptionsButtonLabel()}}</button>
                    <button class="btn btn-default" type="button" ng-click="doStop()">Stop</button>
                    <button class="btn btn-primary" type="button" ng-click="doLoad()">Load</button>
                </span>
            </div>
        </div>

        <!-- OPTIONS MENU-->
        <div ng-cloak class="row options-wrapper" ng-class="{'options-show':optionsGutter, 'options-hide':!optionsGutter}">
            <div class="options-item">
                <div class="options-item-title">Playback</div>
                <div class="options-item-body">
                    <label class="options-label">Playback Video quality:
                        <div class="dropdown" data-toggle="tooltip" data-placement="left"
                                title="Please select your video quality">
                            <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Set Video Quality
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                                <li ng-repeat="bitrateInfo in videoQualities"><a ng-click="selectVideoQuality(bitrateInfo.qualityIndex)">{{bitrateInfo.qualityIndex + 1}}</a></li>
                            </ul>
                        </div>
                    </label>
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="Enables automatic startup of the media once the media is loaded">
                        <input type="checkbox" ng-model="autoPlaySelected" ng-change="toggleAutoPlay()" ng-checked="autoPlaySelected">
                        Auto-Play
                    </label>
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="Enables looping of the media once playback has completed">
                        <input type="checkbox" id="loop-cb" ng-checked="loopSelected">
                        Loop
                    </label>
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="Enables scheduling fragments whiled paused increasing the buffer.">
                        <input type="checkbox" ng-model="scheduleWhilePausedSelected" ng-change="toggleScheduleWhilePaused()" ng-checked="scheduleWhilePausedSelected">
                        Schedule While Paused
                    </label>
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="Enables local storage of player state (last bitrate, a/v or text track etc). This is then used when the next time media is played.">
                        <input type="checkbox" id="localStorageCB" ng-model="localStorageSelected" ng-change="toggleLocalStorage()" ng-checked="localStorageSelected">
                        Allow Local Storage
                    </label>
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="Enables jump small gaps (discontinuities) in the media streams">
                        <input type="checkbox" id="jumpGapsCB" ng-model="jumpGapsSelected" ng-change="toggleJumpGaps()" ng-checked="jumpGapsSelected">
                        Jump Small Gaps
                    </label>
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="">
                        <input type="checkbox" id="lowLatencyModeCB" ng-model="lowLatencyModeSelected" ng-change="togglelowLatencyMode()" ng-checked="lowLatencyModeSelected">
                        Low Latency Mode
                    </label>
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="Enables faster ABR switching (time to render). Only when the new quality is higher than the current.">
                        <input type="checkbox" id="fastSwitchCB" ng-model="fastSwitchSelected" ng-change="toggleFastSwitch()" ng-checked="fastSwitchSelected">
                        Fast Switching ABR
                    </label>
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="Enables auto switch video quality using selected ABR strategy">
                        <input type="checkbox" id="videoAutoSwitchCB" ng-model="videoAutoSwitchSelected" ng-change="toggleVideoAutoSwitch()" ng-checked="videoAutoSwitchSelected">
                        Video Auto Switch
                    </label>                    
                    <label data-toggle="tooltip" data-placement="right"
                           title="Dynamically switch between BOLA and Throughput strategies.">
                        <input  type="radio" id="abrDynamic" autocomplete="off" name="abrStrategy" checked="checked" ng-click="changeABRStrategy('abrDynamic')" >
                        ABR Strategy: Dynamic
                    </label>
                    <label  data-toggle="tooltip" data-placement="right"
                            title="Choose bitrate based on buffer level.">
                        <input type="radio" id="abrBola" autocomplete="off" name="abrStrategy" ng-click="changeABRStrategy('abrBola')">
                        ABR Strategy: BOLA
                    </label>
                    <label  data-toggle="tooltip" data-placement="right"
                            title="Choose bitrate based on recent throughput.">
                        <input type="radio" id="abrThroughput" autocomplete="off" name="abrStrategy" ng-click="changeABRStrategy('abrThroughput')">
                        ABR Strategy: Throughput
                    </label>
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="ABR - Use custom ABR rules">
                        <input type="checkbox" id="customABRRules" ng-model="customABRRulesSelected" ng-change="toggleUseCustomABRRules()" ng-checked="customABRRulesSelected">
                        Use Custom ABR Rules
                    </label>
                </div>
            </div>

            <div class="options-item">
                <div class="options-item-title">DRM Options</div>
                <div class="options-item-body">
                    <div class="dropdown" data-toggle="tooltip" data-placement="left"
                           title="Please select a DRM Key System">
                        <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">DRM KeySystem
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                           <li ng-repeat="item in drmKeySystems"><a ng-click="setDrmKeySystem(item)">{{item}}</a></li>
                        </ul>
                    </div>
                    <p><label  class="options-label" >{{drmKeySystem}}</label></p>
                    <div id="drmLicenseForm" ng-show="drmKeySystem">
                        <label class="options-label">License URL:</label>
                        <input type="text" class="form-control" placeholder="" ng-model="drmLicenseURL">
                    </div>
                </div>
            </div>
            <div class="options-item">
                <div class="options-item-title">Initial Settings</div>
                <div class="options-item-body">
                    <label class="options-label">Initial bitrate Video:</label>
                    <input type="text" class="form-control" placeholder="value in kbps" ng-model="initialVideoBitrate">
                    <label class="options-label">Minimum bitrate Video:</label>
                    <input type="text" class="form-control" placeholder="value in kbps" ng-model="minVideoBitrate">
                    <label class="options-label">Maximum bitrate Video:</label>
                    <input type="text" class="form-control" placeholder="value in kbps" ng-model="maxVideoBitrate">
                    <label class="options-label">Audio:</label>
                    <input type="text" class="form-control" placeholder="audio initial lang, e.g. 'en'" ng-model="initialSettings.audio">
                    <label class="options-label">Video:</label>
                    <input type="text" class="form-control" placeholder="initial role, e.g. 'alternate'" ng-model="initialSettings.video">        <label class="options-label">Text:</label>
                    <input type="text" class="form-control" placeholder="text initial lang, e.g. 'en'" ng-model="initialSettings.text">
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="Enable subtitle on loading text">
                        <input type="checkbox" id="enableTextAtLoading" ng-model="initialSettings.textEnabled">
                        Enable Text At Loading
                    </label>
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="Force text streaming">
                        <input type="checkbox" id="enableForceTextStreaming" ng-model="initialSettings.forceTextStreaming">
                        Force Text Streaming
                    </label>

                </div>
            </div>
            <div class="options-item">
                <div class="options-item-title">Track Switch Mode</div>
                <div class="options-item-body">
                    <label class="options-label">Audio:</label>
                    <label data-toggle="tooltip" data-placement="right"
                           title="When a track is switched, the portion of the buffer that contains old track data is cleared">
                        <input  type="radio" id="always-replace-audio" autocomplete="off" name="track-switch-audio" checked="checked" ng-click="changeTrackSwitchMode('alwaysReplace', 'audio')" >
                        always replace
                    </label>
                    <label data-toggle="tooltip" data-placement="right"
                           title="When a track is switched, the portion of the buffer that contains old track data is NOT cleared">
                        <input type="radio" id="never-replace-audio" autocomplete="off" name="track-switch-audio" ng-click="changeTrackSwitchMode('neverReplace', 'audio')">
                        never replace
                    </label>
                    <label class="options-label">Video:</label>
                    <label data-toggle="tooltip" data-placement="right"
                           title="When a track is switched, the portion of the buffer that contains old track data is cleared">
                        <input  type="radio" id="always-replace-video" autocomplete="off" name="track-switch-video" checked="checked" ng-click="changeTrackSwitchMode('alwaysReplace', 'video')" >
                        always replace
                    </label>
                    <label data-toggle="tooltip" data-placement="right"
                           title="When a track is switched, the portion of the buffer that contains old track data is NOT cleared">
                        <input type="radio" id="never-replace-video" autocomplete="off" name="track-switch-video" ng-click="changeTrackSwitchMode('neverReplace', 'video')">
                        never replace
                    </label>
                </div>
            </div>
            <div class="options-item">
                <div class="options-item-title">Debug</div>
                <div class="options-item-body">
                    <label class="options-label">Log Level:</label>
                    <label data-toggle="tooltip" data-placement="right"
                           title="Don't write any log message in browser console">
                        <input  type="radio" id="log-none" value="none" autocomplete="off" name="log-level" ng-click="setLogLevel()" >
                        NONE
                    </label>
                    <label data-toggle="tooltip" data-placement="right"
                           title="Sets log level of to LOG_LEVEL_FATAL">
                           <input  type="radio" id="log-fatal" value="fatal" autocomplete="off" name="log-level" ng-click="setLogLevel()" >
                        FATAL
                    </label>
                    <label data-toggle="tooltip" data-placement="right"
                           title="Sets log level of to LOG_LEVEL_ERROR">
                           <input  type="radio" id="log-error" value="error" autocomplete="off" name="log-level" ng-click="setLogLevel()" >
                        ERROR
                    </label>
                    <label data-toggle="tooltip" data-placement="right"
                            title="Sets log level of to LOG_LEVEL_WARNING">
                           <input  type="radio" id="log-warning" value="warning" autocomplete="off" name="log-level" ng-click="setLogLevel()" >
                        WARNING
                    </label>
                    <label data-toggle="tooltip" data-placement="right"
                            title="Sets log level of to LOG_LEVEL_INFO">
                           <input  type="radio" id="log-info" value="info" autocomplete="off" name="log-level" checked="checked" ng-click="setLogLevel()" >
                        INFO
                    </label>
                    <label data-toggle="tooltip" data-placement="right"
                            title="Sets log level of to LOG_LEVEL_DEBUG">
                           <input  type="radio" id="log-debug" value="debug" autocomplete="off" name="log-level" ng-click="setLogLevel()" >
                        DEBUG
                    </label>
                </div>
            </div>
            <div class="options-item">
                <div class="options-item-title">CMCD</div>
                <div class="options-item-body">
                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                           title="Enables reporting of CMCD parameters via query parameters">
                        <input type="checkbox" ng-model="cmcdEnabled" ng-change="toggleCmcdEnabled()" ng-checked="cmcdEnabled">
                        Enable CMCD Reporting
                    </label>
                    <label class="options-label">Session ID:</label>
                    <input type="text" class="form-control" placeholder="mandatory session id" ng-model="cmcdSessionId">
                    <label class="options-label">Content ID:</label>
                    <input type="text" class="form-control" placeholder="content id" ng-model="cmcdContentId">
                    <label class="options-label">Device ID:</label>
                    <input type="text" class="form-control" placeholder="device id" ng-model="cmcdDeviceId">
                </div>
            </div>

        </div>

        <!--VIDEO PLAYER / CONTROLS -->
        <div class="row">
            <div class="dash-video-player col-md-9">
                <div id="videoContainer" class="videoContainer">
                    <video></video>
                    <div id="video-caption"></div>
                    <div id="videoController" class="video-controller unselectable" ng-cloak>
                        <div id="playPauseBtn" class="btn-play-pause" data-toggle="tooltip" data-placement="bottom" title="Play/Pause">
                            <span id="iconPlayPause" class="icon-play"></span>
                        </div>
                        <span id="videoTime" class="time-display">00:00:00</span>
                        <div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" data-toggle="tooltip" data-placement="bottom" title="Fullscreen">
                            <span class="icon-fullscreen-enter"></span>
                        </div>
                        <div id="bitrateListBtn" class="btn-bitrate control-icon-layout" data-toggle="tooltip" data-placement="bottom" title="Bitrate List">
                            <span class="icon-bitrate"></span>
                        </div>
                        <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
                        <div id="muteBtn" class="btn-mute control-icon-layout" data-toggle="tooltip" data-placement="bottom" title="Mute">
                            <span id="iconMute" class="icon-mute-off"></span>
                        </div>
                        <div id="trackSwitchBtn" class="btn-track-switch control-icon-layout" data-toggle="tooltip" data-placement="bottom" title="Track List">
                            <span class="icon-tracks"></span>
                        </div>
                        <div id="captionBtn" class="btn-caption control-icon-layout" data-toggle="tooltip" data-placement="bottom" title="Closed Caption / Subtitles">
                            <span class="icon-caption"></span>
                        </div>
                        <span id="videoDuration" class="duration-display">00:00:00</span>
                        <div class="seekContainer">
                            <div id="seekbar" class="seekbar seekbar-complete">
                                <div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
                                <div id="seekbar-play" class="seekbar seekbar-play"></div>
                            </div>
                        </div>
                        <div id="thumbnail-container" class="thumbnail-container">
                            <div id="thumbnail-elem" class="thumbnail-elem"></div>
                            <div id="thumbnail-time-label" class="thumbnail-time-label"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- STATS TAB CONTENT -->
            <div class="col-md-3 tabs-section">
                <div >
                    <ul class="nav nav-tabs" role="tablist">
                      <li class="active">
                          <a href="#videoStatsTab" role="tab" data-toggle="tab">
                              Video
                          </a>
                      </li>
                      <li><a href="#audioStatsTab" role="tab" data-toggle="tab">
                          Audio
                          </a>
                      </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                      <div class="tab-pane fade active in" id="videoStatsTab">
                        <div class="panel-body panel-stats" ng-cloak>
                            <!-- VIDEO STATS ITEMS-->
                            <div class="text-success">
                                <input id="videoBufferCB" type="checkbox" ng-model="chartState.video.buffer.selected" ng-change="enableChartByName('buffer', 'video')" >
                                <label class="text-primary" for="videoBufferCB"  data-toggle="tooltip" data-placement="top"
                                       title="The length of the forward buffer, in seconds">Buffer Length : </label> {{videoBufferLength}}
                            </div>

                            <div class="text-success">
                                <input id="videoBitrateCB" type="checkbox" ng-model="chartState.video.bitrate.selected" ng-change="enableChartByName('bitrate', 'video')" >
                                <label class="text-primary" for="videoBitrateCB"  data-toggle="tooltip" data-placement="top"
                                       title="The bitrate of the representation being downloaded">Bitrate Downloading :</label> {{videoBitrate}} kbps
                            </div>

                            <div class="text-success" >
                                <input id="videoPendingIndexCB" type="checkbox" ng-model="chartState.video.pendingIndex.selected" ng-change="enableChartByName('pendingIndex', 'video')" >
                                <label class="text-primary" for="videoPendingIndexCB"  data-toggle="tooltip" data-placement="top"
                                       title="The representation index being downloaded and appended to the buffer">Index Downloading :</label> {{videoPendingIndex}}
                            </div>
                            <div class="text-success" >
                                <input id="videoIndexCB" type="checkbox" ng-model="chartState.video.index.selected" ng-change="enableChartByName('index', 'video')" >
                                <label class="text-primary" for="videoIndexCB"  data-toggle="tooltip" data-placement="top"
                                       title="The representation index being rendered.">Current Index / Max Index :</label> {{videoIndex}} / {{videoMaxIndex}}
                            </div>
                            <div class="text-success" >
                                <input id="videoDroppedFramesCB" type="checkbox" ng-model="chartState.video.droppedFPS.selected" ng-change="enableChartByName('droppedFPS', 'video')" >
                                <label class="text-primary" for="videoDroppedFramesCB"  data-toggle="tooltip" data-placement="top"
                                  title="The absolute count of frames dropped by the rendering pipeline since play commenced">Dropped Frames :</label> {{videoDroppedFrames}}
                            </div>
                            <div class="text-success">
                                <input id="videoLatencyCB" type="checkbox" ng-model="chartState.video.latency.selected" ng-change="enableChartByName('latency', 'video')" >
                                <label class="text-primary" for="videoLatencyCB" data-toggle="tooltip" data-placement="top"
                                  title="The minimum, average and maximum latency over the last 4 requested segments. Latency is the time in seconds from request of segment to receipt of first byte">Latency (min|avg|max) :</label> {{videoLatency}}
                            </div>
                            <div class="text-success">
                                <input id="videoDownloadCB" type="checkbox" ng-model="chartState.video.download.selected" ng-change="enableChartByName('download', 'video')" >
                                <label class="text-primary" for="videoDownloadCB" data-toggle="tooltip" data-placement="top"
                                  title="The minimum, average and maximum download time for the last 4 requested segments. Download time is the time in seconds from first byte being received to the last byte">Download (min|avg|max) :</label> {{videoDownload}}
                            </div>
                            <div class="text-success">
                                <input id="videoRatioCB" type="checkbox" ng-model="chartState.video.ratio.selected" ng-change="enableChartByName('ratio', 'video')" >
                                <label class="text-primary" for="videoRatioCB" data-toggle="tooltip" data-placement="top"
                                  title="The minimum, average and maximum ratio of the segment playback time to total download time over the last 4 segments">Ratio (min|avg|max) :</label> {{videoRatio}}
                            </div>
                            <div class="text-success" ng-show="isDynamic">
                                <input id="liveLatencyCB" type="checkbox" ng-model="chartState.video.liveLatency.selected" ng-change="enableChartByName('liveLatency', 'video')" >
                                <label class="text-primary" for="liveLatencyCB" data-toggle="tooltip" data-placement="top"
                                  title="Difference between live time and current playback position in seconds. This latency estimate does not include the time taken by the encoder to encode the content">Live Latency:</label> {{videoLiveLatency}}
                            </div>
                        </div>
                      </div>
                      <div class="tab-pane fade" id="audioStatsTab">
                        <div class="panel-body panel-stats">
                            <!-- AUDIO STATS ITEMS-->
                            <div class="text-success" >
                                <input id="audioBufferLengthCB" type="checkbox" ng-model="chartState.audio.buffer.selected" ng-change="enableChartByName('buffer', 'audio')" >
                                <label class="text-primary" for="audioBufferLengthCB" data-toggle="tooltip" data-placement="top"
                                  title="The length of the forward buffer, in seconds">Buffer Length :</label> {{audioBufferLength}}
                            </div>
                            <div class="text-success">
                                <input id="audioBitrateCB" type="checkbox" ng-model="chartState.audio.bitrate.selected" ng-change="enableChartByName('bitrate', 'audio')" >
                                <label class="text-primary" for="audioBitrateCB" data-toggle="tooltip" data-placement="top"
                                  title="The bitrate of the representation being downloaded" >Bitrate Downloading :</label> {{audioBitrate}} kbps
                            </div>
                            <div class="text-success">
                                <input id="audioPendingIndexCB" type="checkbox" ng-model="chartState.audio.pendingIndex.selected" ng-change="enableChartByName('pendingIndex', 'audio')" >
                                <label class="text-primary" for="audioPendingIndexCB" data-toggle="tooltip" data-placement="top"
                                  title="The representation index being downloaded and appended to the buffer">Index Downloading :</label> {{audioPendingIndex}}
                            </div>
                            <div class="text-success">
                                <input id="audioIndexCB" type="checkbox" ng-model="chartState.audio.index.selected" ng-change="enableChartByName('index', 'audio')" >
                                <label class="text-primary" for="audioIndexCB" data-toggle="tooltip" data-placement="top"
                                  title="The representation index being rendered.">Current Index / Max Index :</label> {{audioIndex}} / {{audioMaxIndex}}
                            </div>
                            <div class="text-success">
                                <input id="audioDroppedFramesCB" type="checkbox" ng-model="chartState.audio.droppedFPS.selected" ng-change="enableChartByName('droppedFPS', 'audio')" >
                                <label class="text-primary" for="audioDroppedFramesCB" data-toggle="tooltip" data-placement="top"
                                  title="The absolute count of frames dropped by the rendering pipeline since play commenced">Dropped Frames :</label> {{audioDroppedFrames}}
                            </div>
                            <div class="text-success">
                                <input id="audioLatencyCB" type="checkbox" ng-model="chartState.audio.latency.selected" ng-change="enableChartByName('latency', 'audio')" >
                                <label class="text-primary" for="audioLatencyCB" data-toggle="tooltip" data-placement="top"
                                  title="The minimum, average and maximum latency over the last 4 requested segments. Latency is the time in seconds from request of segment to receipt of first byte">Latency (min|avg|max) :</label> {{audioLatency}}
                            </div>
                            <div class="text-success">
                                <input id="audioDownloadCB" type="checkbox" ng-model="chartState.audio.download.selected" ng-change="enableChartByName('download', 'audio')" >
                                <label class="text-primary" for="audioDownloadCB" data-toggle="tooltip" data-placement="top"
                                  title="The minimum, average and maximum download time for the last 4 requested segments. Download time is the time in seconds from first byte being received to the last byte">Download (min|avg|max) :</label> {{audioDownload}}
                            </div>
                            <div class="text-success">
                                <input id="audioRatioCB" type="checkbox" ng-model="chartState.audio.ratio.selected" ng-change="enableChartByName('ratio', 'audio')" >
                                <label class="text-primary" for="audioRatioCB" data-toggle="tooltip" data-placement="top"
                                  title="The minimum, average and maximum ratio of the segment playback time to total download time over the last 4 segments">Ratio (min|avg|max) :</label> {{audioRatio}}
                            </div>
                            <div class="text-success">
                                <input id="liveLatencyCB" type="checkbox" ng-model="chartState.audio.liveLatency.selected" ng-change="enableChartByName('liveLatency', 'audio')" >
                                <label class="text-primary" for="liveLatencyCB" data-toggle="tooltip" data-placement="top"
                                  title="Number of seconds of difference between the real live and the playing live">Live Latency:</label> {{audioLiveLatency}}
                            </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ERROR MODAL -->
        <div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header errorModalHeader">
                        <h5 class="modal-title" id="errorModalLabel">Error {{errorType}}</h5>
                    </div>
                    <div class="modal-body">
                        {{error}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
      </div>

        <!-- CHARTING -->
       <div class="chart-panel">
            <div class="chart-controls">
                <div class="btn-group">
                    <button id="disable-chart-btn" class="btn btn-primary" ng-click="clearChartData()" ng-cloak>Clear</button>
                    <button id="disable-chart-btn" class="btn btn-primary" ng-click="onChartEnableButtonClick()" ng-cloak>{{getChartButtonLabel()}}</button>
                </div>
                <div id="legend-wrapper" class="legend-row">
                </div>
            </div>
            <div id="chart-wrapper" >
                <div id="chart-inventory" >
                    <flot dataset="chartData" options="chartOptions"></flot>
                </div>
            </div>
        </div>

    </div>

    <!-- FOOTER -->
    <div class="footer-area" ng-cloak>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="footer-text">Contributors:</h3>
                    <a ng-repeat="item in contributors" class="footer-text" href="{{item.link}}" target="_blank">
                        <img ng-show="hasLogo(item)" ng-src="{{item.logo}}" alt="{{item.link}}"/>
                        <span class="contributor" ng-show="!hasLogo(item)">{{item.name}}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
